body {
    min-width : 320px;
    max-width : 750px;
    margin    : 0 auto;
    background: #F5F5F5;
    width     : 100vw;
    position  : relative;
}

// 约束当屏幕大于750px时 html字体大小就不变化
@media screen and (min-width:750px) {
    html {
        font-size: 37.5px !important;
    }
}

ul li {
    list-style: none;
}


.hb_content {
    width          : 100%;
    padding-top    : 1.066667rem;
    padding-bottom : 1.84rem;
    box-sizing     : border-box;
    background     : url("../images/hb_bg.png") no-repeat;
    background-size: cover;

    .hb__bg_wrap {
        margin         : 0 auto;
        width          : 19.413333rem;
        height         : 24.96rem;
        background     : url("../images/hb_bg2.png") no-repeat;
        background-size: cover;

        .head {
            padding-top   : 1.12rem;
            display       : flex;
            flex-direction: column;
            align-items   : center;

            .title {
                font-size: 0.853333rem;
                color    : #EB3521;
            }

            .number {
                margin-top : 0.586667rem;
                color      : #EB3521;
                font-size  : 2.628267rem;
                font-weight: bold;
            }

            .name {
                font-size      : 0.64rem;
                color          : #EB3521;
                width          : 4.4rem;
                height         : 0.96rem;
                display        : flex;
                justify-content: center;
                align-items    : center;
                border-radius  : 0.586667rem;
                border         : 1px solid rgba(200, 102, 57, 0.3);
                margin-top     : 0.266667rem;
            }
        }

        .body_wrap {
            margin-top    : 4.906667rem;
            display       : flex;
            flex-direction: column;
            align-items   : center;

            img {
                width        : 4.453333rem;
                height       : 4.453333rem;
                margin-bottom: 0.48rem;
            }

            .h2 {
                p {
                    text-align : center;
                    color      : #fff;
                    font-size  : 0.666667rem;
                    line-height: 0.96rem;
                }
            }

            .button_wrap {
                margin-top     : 1.6rem;
                width          : 10.026667rem;
                height         : 2.053333rem;
                background     : linear-gradient(180deg, #FFE595 0%, #FFC442 100%);
                border-radius  : 1.12rem;
                color          : #532400;
                font-weight    : bold;
                font-size      : 0.906667rem;
                display        : flex;
                justify-content: center;
                align-items    : center;
            }

            .induce {
                display        : flex;
                justify-content: space-between;
                align-items    : center;
                margin-top     : 0.293333rem;

                span {
                    font-size: 0.64rem;
                    color    : #fff;
                    opacity  : 0.7;
                }

                i {
                    opacity   : 0.7;
                    font-style: normal;
                    color     : #fff;
                    font-size : 0.64rem;
                    margin    : 0 0.346667rem;
                }
            }
        }
    }

    .hb_notice {
        margin-top    : 0.8rem;
        display       : flex;
        flex-direction: column;
        align-items   : center;

        .title_h2 {
            background     : url("../images/hb_h2.png") no-repeat;
            background-size: cover;
            display        : flex;
            justify-content: center;
            align-items    : center;
            color          : #fff;
            font-size      : 0.746667rem;
            font-weight    : bold;
            width          : 8.693333rem;
            height         : 1.493333rem;
            margin-bottom  : -0.746667rem;
            z-index        : 1;
        }

        .notice_wrap {
            width        : 17.333333rem;
            height       : 9.2rem;
            background   : #FFFFFF;
            border-radius: 0.533333rem;
            padding      : 1.333333rem 0.8rem;
        }

        ul {
            overflow: hidden;
            height  : 6.666667rem;

            li {
                color          : #323232;
                font-size      : 0.746667rem;
                padding        : 0.373333rem 0.4rem;
                border-bottom  : 1px dashed #CCCCCC;
                display        : flex;
                justify-content: flex-start;
                align-items    : center;
                height         : 1.6rem !important;

                span.tel_user {
                    color    : #323232;
                    font-size: 0.746667rem;
                }

                span.text_red {
                    color    : #EB3521;
                    font-size: 0.746667rem;
                }
            }
        }
    }
}


// 阴影
.show_wrap {
    position  : fixed;
    left      : 0;
    top       : 0;
    right     : 0;
    bottom    : 0;
    z-index   : 2;
    background: rgba(0, 0, 0, 0.9);

    // 手慢了
    .xf_wrap {
        width          : 13.6rem;
        height         : 13.28rem;
        position       : absolute;
        left           : 50%;
        transform      : translate(-50%, -50%);
        top            : 50%;
        background     : url("../images/later_xf.png") no-repeat;
        background-size: cover;
        box-sizing     : border-box;
        padding        : 0.906667rem 1.573333rem;

        .btn_colse {
            display        : flex;
            justify-content: flex-end;
            margin-bottom  : 0.506667rem;

            img {
                width : 0.56rem;
                height: 0.56rem;
            }
        }

        .tips {
            display        : flex;
            justify-content: center;
            font-size      : 0.853333rem;
            color          : #70362B;
            margin-bottom  : 0.186667rem;
        }

        .h2 {
            font-size      : 1.013333rem;
            font-weight    : bold;
            color          : #70362B;
            display        : flex;
            justify-content: center;
        }
    }

    // 活动未开始
    .action_before {
        width    : 11.813333rem;
        height   : 16.266667rem;
        position : absolute;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);

        .btn_colse {
            display        : flex;
            justify-content: flex-end;

            img {
                width : 1.493333rem;
                height: 1.493333rem;
            }
        }

        .img_wating {
            width        : 11.813333rem;
            height       : 14.453333rem;
            margin-bottom: 0.293333rem;
        }

        p {
            font-size   : 0.906667rem;
            color       : #fff;
            padding-left: 0.853333rem;
        }
    }

    // 活动结束
    .action_after {
        width    : 17.653333rem;
        height   : 16.32rem;
        position : absolute;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);

        .btn_colse {
            display        : flex;
            justify-content: flex-end;

            img {
                width : 1.493333rem;
                height: 1.493333rem;
            }
        }

        img.img_gift {
            width : 17.653333rem;
            height: 14.826667rem;
        }
    }

    // 跳转
    .action_go {
        width    : 17.12rem;
        // height: 754px;
        position : absolute;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);

        .one_jf {
            position: relative;

            img {
                width : 17.12rem;
                height: 15.733333rem;
            }

            .btn {
                position       : absolute;
                bottom         : 2.373333rem;
                left           : 50%;
                transform      : translateX(-50%);
                width          : 6.933333rem;
                height         : 1.76rem;
                background     : url("../images/later_btn.png") no-repeat;
                background-size: cover;
                display        : flex;
                justify-content: center;
                align-items    : center;
                color          : #7A3710;
                font-weight    : bold;
                font-size      : 0.8rem;
            }
        }

        p {
            text-align: center;
            margin-top: 1.066667rem;
            font-size : 0.906667rem;
            color     : #fff;
            margin-bottom: 0.533333rem;
        }

        .btn_colse {
            display        : flex;
            justify-content: center;

            img {
                width : 1.493333rem;
                height: 1.493333rem;
            }
        }
    }
}